<template>
  <div class="ceDian">
    <div class="cdHeader">
      <label for="">所属项目</label>
      <select v-model="xiangmu">
        <option selected>河南四维远见试点项目</option>
        <option>请选择</option>
      </select>

      <label for="">测项</label>
      <select v-model="chuanganqi" @change="handleSelectChange">
        <option selected value="GNSS">GNSS</option>
        <option value="yuliangji">雨量计</option>
        <option value="turangshidu">土壤湿度</option>
        <option value="turangwendu">土壤温度</option>
        <option value="zhenxianpinlv">振弦频率</option>
        <option value="zhenxiantemperature">振弦温度</option>
        <option value="other">请选择</option>
      </select>
      <button class="btn2" @click="reset">重置</button>
      <button class="btn3">数据分析</button>
    </div>

    <div class="cdtb">
      <div class="tubiao" ref="barChart"
        v-if="xiangmu === '河南四维远见试点项目' && chuanganqi === 'yuliangji' || xiangmu === '河南四维远见试点项目' && chuanganqi === 'turangshidu' || xiangmu === '河南四维远见试点项目' && chuanganqi === 'turangwendu' || xiangmu === '河南四维远见试点项目' && chuanganqi === 'zhenxianpinlv' || xiangmu === '河南四维远见试点项目' && chuanganqi === 'zhenxiantemperature'">
      </div>
      <div class="kong" v-else>无数据</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { historicalStore } from "../stores/user"
import { onBeforeUnmount, onMounted, ref, onUnmounted } from "vue"
import {
  getHistoryData,
  getHistoryData1,
  getHistoryData11,
  getHistoryData12,
  getHistoryData13,
  getHistoryData14,
  getHistoryData15,
  getHistoryData16,
  getHistoryData17,
  getHistoryData18,
  getHistoryData19,
  getHistoryData2,
  getHistoryData3,
  getHistoryData4,
} from "../utils/api"
import * as echarts from "echarts"
let xiangmu = ref('河南四维远见试点项目')
let chuanganqi = ref('other')
const reset = () => {
  xiangmu.value = '请选择'
  chuanganqi.value = 'other'
};
const barChart = ref(null);
let myChart = null;
let chartData = null;
let intervalIdCd;
function handleSelectChange(event: Event) {
  const target = event.target as HTMLSelectElement;
  const selectedValue = target.value;
  console.log('Selected value:', selectedValue);
  switch (selectedValue) {
    case 'GNSS':
      initBarChart()
      break;
    case 'yuliangji':
      initBarChart()
      break;
    case 'turangshidu':
      initBarChart()
      break;
    case 'turangwendu':
      initBarChart()
      break;
    case 'zhenxianpinlv':
      initBarChart()
      break;
    case 'zhenxiantemperature':
      initBarChart()
      break;
    case 'other':
      initBarChart()
      break;
    default:
      initBarChart()
      break;
  }
}
const initBarChart = () => {
  if (barChart.value) {
    myChart = echarts.init(barChart.value);
    updateChartData();
    if (chuanganqi.value === 'zhenxianpinlv') {
      intervalIdCd = setInterval(updateChartData, 10000);
    } else if (chuanganqi.value === 'zhenxiantemperature') {
      intervalIdCd = setInterval(updateChartData, 3600000);
    } else if (chuanganqi.value === 'turangwendu') {
      intervalIdCd = setInterval(updateChartData, 21600000);
    } else if (chuanganqi.value === 'turangshidu') {
      intervalIdCd = setInterval(updateChartData, 10000);
    } else if (chuanganqi.value === 'yuliangji') {
      intervalIdCd = setInterval(updateChartData, 10000);
    } else { }
  }
};
let zxwd = historicalStore()
const fetchChartdata = async () => {
  let chartdata1 = await getHistoryData1();
  let chartdata2 = await getHistoryData11();
  let chartdata3 = await getHistoryData12();
  let chartdata4 = await getHistoryData13();
  let chartdata5 = await getHistoryData14();
  let chartdata6 = await getHistoryData15();
  let chartdata7 = await getHistoryData16();
  let chartdata8 = await getHistoryData17();
  let chartdata9 = await getHistoryData18();
  let chartdata10 = await getHistoryData19();
  let chartdata11 = chartdata1.Data[0]
  let chartdata21 = chartdata2.Data[0]
  let chartdata31 = chartdata3.Data[0]
  let chartdata41 = chartdata4.Data[0]
  let chartdata51 = chartdata5.Data[0]
  let chartdata61 = chartdata6.Data[0]
  let chartdata71 = chartdata7.Data[0]
  let chartdata81 = chartdata8.Data[0]
  let chartdata91 = chartdata9.Data[0]
  let chartdata101 = chartdata10.Data[0]
  let chartdata = [{ chartdata11 }, { chartdata21 }, { chartdata31 }, { chartdata41 }, { chartdata51 }, { chartdata61 }, { chartdata71 }, { chartdata81 }, { chartdata91 }, { chartdata101 }]
  zxwd.setData(chartdata)
}
let intervalId2;
onMounted(async () => {
  await fetchChartdata();
  intervalId2 = setInterval(fetchChartdata, 3600000);
});
onUnmounted(() => {
  if (intervalId2) {
    clearInterval(intervalId2);
  }
});
const updateChartData = async () => {
  if (chuanganqi.value === 'zhenxianpinlv') {
    chartData = await getHistoryData();
    const option = {
      title: {
        text: '振弦频率历史数据折线图',
        left: 'center',
        textStyle: {
          color: '#0DEDF1',
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [chartData.Data[0].sTime,
        chartData.Data[1].sTime,
        chartData.Data[2].sTime,
        chartData.Data[3].sTime,
        chartData.Data[4].sTime,
        chartData.Data[5].sTime,
        chartData.Data[6].sTime,
        chartData.Data[7].sTime,
        chartData.Data[8].sTime,
        chartData.Data[9].sTime,
        ]
      },
      yAxis: {
        type: 'value',
        min: 1500,
        max: 1600
      },
      series: [
        {
          data: [chartData.Data[0].sRealTimeValue,
          chartData.Data[1].sRealTimeValue,
          chartData.Data[2].sRealTimeValue,
          chartData.Data[3].sRealTimeValue,
          chartData.Data[4].sRealTimeValue,
          chartData.Data[5].sRealTimeValue,
          chartData.Data[6].sRealTimeValue,
          chartData.Data[7].sRealTimeValue,
          chartData.Data[8].sRealTimeValue,
          chartData.Data[9].sRealTimeValue,
          ],
          type: 'line',
          areaStyle: {}
        }
      ]
    }
    myChart.setOption(option);
  } else if (chuanganqi.value === 'zhenxiantemperature') {
    // let chartData1 = await getHistoryData1();
    // let chartData2 = await getHistoryData11();
    // let chartData3 = await getHistoryData12();
    // let chartData4 = await getHistoryData13();
    // let chartData5 = await getHistoryData14();
    // let chartData6 = await getHistoryData15();
    // let chartData7 = await getHistoryData16();
    // let chartData8 = await getHistoryData17();
    // let chartData9 = await getHistoryData18();
    // let chartData10 = await getHistoryData19();
    // let chartData11 = chartData1.Data[0]
    // let chartData21 = chartData2.Data[0]
    // let chartData31 = chartData3.Data[0]
    // let chartData41 = chartData4.Data[0]
    // let chartData51 = chartData5.Data[0]
    // let chartData61 = chartData6.Data[0]
    // let chartData71 = chartData7.Data[0]
    // let chartData81 = chartData8.Data[0]
    // let chartData91 = chartData9.Data[0]
    // let chartData101 = chartData10.Data[0]
    // chartData = [{chartData11},{chartData21},{chartData31},{chartData41},{chartData51},{chartData61},{chartData71},{chartData81},{chartData91},{chartData101}]
    chartData = historicalStore().data
    const option = {
      title: {
        text: '振弦温度历史数据折线图',
        left: 'center',
        textStyle: {
          color: '#0DEDF1',
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [chartData[0].chartdata11.sTime,
        chartData[1].chartdata21.sTime,
        chartData[2].chartdata31.sTime,
        chartData[3].chartdata41.sTime,
        chartData[4].chartdata51.sTime,
        chartData[5].chartdata61.sTime,
        chartData[6].chartdata71.sTime,
        chartData[7].chartdata81.sTime,
        chartData[8].chartdata91.sTime,
        chartData[9].chartdata101.sTime,
        ]
      },
      yAxis: {
        type: 'value',
        min: -20,
        max: 50
      },
      series: [
        {
          data: [chartData[0].chartdata11.sRealTimeValue,
          chartData[1].chartdata21.sRealTimeValue,
          chartData[2].chartdata31.sRealTimeValue,
          chartData[3].chartdata41.sRealTimeValue,
          chartData[4].chartdata51.sRealTimeValue,
          chartData[5].chartdata61.sRealTimeValue,
          chartData[6].chartdata71.sRealTimeValue,
          chartData[7].chartdata81.sRealTimeValue,
          chartData[8].chartdata91.sRealTimeValue,
          chartData[9].chartdata101.sRealTimeValue,
          ],
          type: 'line',
          areaStyle: {}
        }
      ]
    }
    myChart.setOption(option);
  } else if (chuanganqi.value === 'turangwendu') {
    chartData = await getHistoryData3();
    const option = {
      title: {
        text: '土壤温度历史数据折线图',
        left: 'center',
        textStyle: {
          color: '#0DEDF1',
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [chartData.Data[0].sTime,
        chartData.Data[1].sTime,
        chartData.Data[2].sTime,
        chartData.Data[3].sTime,
        chartData.Data[4].sTime,
        chartData.Data[5].sTime,
        chartData.Data[6].sTime,
        chartData.Data[7].sTime,
        chartData.Data[8].sTime,
        chartData.Data[9].sTime,
        ]
      },
      yAxis: {
        type: 'value',
        min: -20,
        max: 50
      },
      series: [
        {
          data: [chartData.Data[0].sRealTimeValue,
          chartData.Data[1].sRealTimeValue,
          chartData.Data[2].sRealTimeValue,
          chartData.Data[3].sRealTimeValue,
          chartData.Data[4].sRealTimeValue,
          chartData.Data[5].sRealTimeValue,
          chartData.Data[6].sRealTimeValue,
          chartData.Data[7].sRealTimeValue,
          chartData.Data[8].sRealTimeValue,
          chartData.Data[9].sRealTimeValue,
          ],
          type: 'line',
          areaStyle: {}
        }
      ]
    }
    myChart.setOption(option);
  } else if (chuanganqi.value === 'turangshidu') {
    chartData = await getHistoryData2();
    const option = {
      title: {
        text: '土壤湿度历史数据折线图',
        left: 'center',
        textStyle: {
          color: '#0DEDF1',
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [chartData.Data[0].sTime,
        chartData.Data[1].sTime,
        chartData.Data[2].sTime,
        chartData.Data[3].sTime,
        chartData.Data[4].sTime,
        chartData.Data[5].sTime,
        chartData.Data[6].sTime,
        chartData.Data[7].sTime,
        chartData.Data[8].sTime,
        chartData.Data[9].sTime,
        ]
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 50
      },
      series: [
        {
          data: [chartData.Data[0].sRealTimeValue,
          chartData.Data[1].sRealTimeValue,
          chartData.Data[2].sRealTimeValue,
          chartData.Data[3].sRealTimeValue,
          chartData.Data[4].sRealTimeValue,
          chartData.Data[5].sRealTimeValue,
          chartData.Data[6].sRealTimeValue,
          chartData.Data[7].sRealTimeValue,
          chartData.Data[8].sRealTimeValue,
          chartData.Data[9].sRealTimeValue,
          ],
          type: 'line',
          areaStyle: {}
        }
      ]
    }
    myChart.setOption(option);
  } else if (chuanganqi.value === 'yuliangji') {
    chartData = await getHistoryData4();
    const option = {
      title: {
        text: '雨量计历史数据折线图',
        left: 'center',
        textStyle: {
          color: '#0DEDF1',
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [chartData.Data[0].sTime,
        chartData.Data[1].sTime,
        chartData.Data[2].sTime,
        chartData.Data[3].sTime,
        chartData.Data[4].sTime,
        chartData.Data[5].sTime,
        chartData.Data[6].sTime,
        chartData.Data[7].sTime,
        chartData.Data[8].sTime,
        chartData.Data[9].sTime,
        ]
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100
      },
      series: [
        {
          data: [chartData.Data[0].sRealTimeValue,
          chartData.Data[1].sRealTimeValue,
          chartData.Data[2].sRealTimeValue,
          chartData.Data[3].sRealTimeValue,
          chartData.Data[4].sRealTimeValue,
          chartData.Data[5].sRealTimeValue,
          chartData.Data[6].sRealTimeValue,
          chartData.Data[7].sRealTimeValue,
          chartData.Data[8].sRealTimeValue,
          chartData.Data[9].sRealTimeValue,
          ],
          type: 'line',
          areaStyle: {}
        }
      ]
    }
    myChart.setOption(option);
  } else { }
};
onBeforeUnmount(() => {
  clearInterval(intervalIdCd)
});
const resizeChart = () => {
  if (myChart) {
    myChart.resize()
  }
}
onMounted(() => {
  window.addEventListener("resize", resizeChart)
})
onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose()
  }
  window.removeEventListener("resize", resizeChart)
})
</script>

<style scoped>
.ceDian {
  width: 100%;
  height: 100%;
  background: url(/img/jiemian/bg.jpg);
  font-size: 0.8vw;
  color: black;
}

.cdHeader {
  display: flex;
  align-items: center;
  width: 100%;
  height: 9%;
}

label {
  display: block;
  margin-left: 8%;
  width: 6%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.78vw;
  font-size: 0.8vw;
  color: aqua;
}

select {
  width: 10%;
  height: 50%;
  font-size: 0.8vw;
}

.btn2 {
  margin-left: 10%;
  width: 3%;
  height: 50%;
  border-radius: 0.3vw;
  font-size: 0.8vw;
}

.btn3 {
  margin-left: 10%;
  width: 5%;
  height: 50%;
  border-radius: 0.3vw;
  font-size: 0.8vw;
}

.cdtb {
  width: 100%;
  height: 91%;
}

.tubiao {
  width: 100%;
  height: 100%;
}

.kong {
  width: 100%;
  height: 100%;
  padding-top: 10%;
  text-align: center;
  color: white;
  font-size: 2vw;
}
</style>
